<div fxLayoutAlign="center">
  <div class="table-container mat-elevation-z8 custom-slate">
    <div class="heading">
      <div *ngIf="searchValue"><span>{{"TITLE_SEARCH_RESULTS" | translate}} - </span> <span
        [innerHTML]="searchValue"></span></div>
      <div *ngIf="!searchValue">{{"TITLE_ALL_PRODUCTS" | translate}}</div>
      <div *ngIf="confirmation" style="margin-top:5px;">
        <p class="confirmation">{{ confirmation }}</p>
      </div>
    </div>
    <mat-table #table [dataSource]="dataSource">
      <ng-container matColumnDef="Image">
        <mat-header-cell *matHeaderCellDef translate="LABEL_IMAGE" fxFlex="noshrink"></mat-header-cell>
        <mat-cell *matCellDef="let element" (click)="showDetail(element)" fxFlex="noshrink">
          <img [src]="'assets/public/images/products/'+element.image" role="button"
               class="img-responsive img-thumbnail">
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Product">
        <mat-header-cell *matHeaderCellDef translate="LABEL_PRODUCT" fxFlex="20%" fxFlex.lt-md="50%"></mat-header-cell>
        <mat-cell *matCellDef="let element" fxFlex="20%" fxFlex.lt-md="50%"> {{element.name}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="Description">
        <mat-header-cell *matHeaderCellDef translate="LABEL_DESCRIPTION" fxShow fxHide.lt-md fxFlex="1 1 50%"></mat-header-cell>
        <mat-cell *matCellDef="let element" fxShow fxHide.lt-md fxFlex="1 1 50%">
          <div [innerHTML]="element.description"></div>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Price">
        <mat-header-cell *matHeaderCellDef translate="LABEL_PRICE" fxFlex="noshrink"></mat-header-cell>
        <mat-cell *matCellDef="let element" fxFlex="noshrink"> {{element.price}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="Select">
        <mat-header-cell *matHeaderCellDef fxFlex="none"></mat-header-cell>
        <mat-cell *matCellDef="let element" fxLayout="row" fxLayout.lt-sm="column" fxFlex="none">
          <button mat-icon-button (click)="showDetail(element)"><i class="fas fa-eye"></i></button>
          <button *ngIf="isLoggedIn()" mat-icon-button (click)="addToBasket(element.id)"><i
            class="fas fa-cart-plus"></i></button>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

    </mat-table>

    <mat-divider></mat-divider>

    <mat-paginator #paginator
                   [pageSize]="10"
                   [pageSizeOptions]="[5, 10,20]">
    </mat-paginator>

  </div>
</div>
